<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<style type="text/css">
body {
	background-color: #000;
	background-image: url(bg.jpg);
	background-repeat: repeat-x;
}
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 7pt;
	color: #FFF;
}

h1 { font-family:Verdana, Geneva, sans-serif; font-size:24; text-align:center;}
h2 { font-family:Verdana, Geneva, sans-serif; font-size:10px; color:white;}
h3 { font-family:Verdana, Geneva, sans-serif; font-size:30; color:white; text-align:center;}

#half1{
    font: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: white;
    position: absolute;
    top: 100px;
    left: 300px;
    text-align: left;
    font-style: bold;
}

#half2{
    font: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: white;
    position: absolute;
    top: 120px;
    left: 550px;
    text-align: left;
    font-style: bold;
}

#half3{
    font: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: white;
    position: absolute;
    top: 120px;
    left: 800px;
    text-align: left;
    font-style: bold;
}

h1 { font-family:Verdana, Geneva, sans-serif; font-size:24px; text-align:center;}
h2 { font-family:Verdana, Geneva, sans-serif; font-size:11px; color:white;}
h3 { font-family:Verdana, Geneva, sans-serif; font-size:30; color:white; text-align:center;}

   </style>
   <script language = "Javascript" type="text/javascript">

function OnBlurInput(blur){

			if(blur.value == "")
			{
		    blur.value = "";
			}

}

function OnBlurInputPass(blur){

			if(blur.value == "")
			{
		    blur.value = "";
			}

			if(blur.value == "Password" || blur.value == "Retype Password" )
			{
			blur.type = "text";
			blur.value = blur.defaultValue;
			}


}

function OnClickInput(click){

			if(click.value == click.defaultValue )
			{
				click.value = "";
			}


}

function OnClickInputPass(click){

			if(click.value == click.defaultValue )
			{
				click.value = "";
			}
			if(click.type == "text")
			{
			click.type = "password";

			}

}
</script>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>FooBar Bookstore</title>
         <script src="jquery.js"></script>
        <script  src="jquery.validate.js"></script>
        <script src="jquery.js"></script>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="jquery.js"></script>
        <script src="jquery.ui.core.js"></script>
        <script src="jquery.ui.widget.js"></script>
        <script src="jquery.ui.datepicker.js"></script>

        <script>
            $(function() {
                $( "#expdate" ).datepicker();
            });
        
        
        </script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <style type="text/css">
            * { font-family: Verdana; font-size: 96%; }
            label { width: 10em; float: left; }
            label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
            p { clear: both; }
            .submit { margin-left: 12em; }
            em { font-weight: bold; padding-right: 1em; vertical-align: top; }
        </style>
        <script>
            $(document).ready(function(){
                $("#RegisterForm").validate({
                    rules:{
                        creditcard1: {
                            required:true,
                            creditcard:true
                        }
           
                    }
        
                });
            });
        </script>
        <script>
            $(document).ready(function(){
                $("#RegisterForm").validate({
                    rules: {
                        expdate: {
                            required: true,
                            date: true
                        }
                    }
                }
            );
            });
        </script>
    </head>
    <body>
       
        
        <h1>FooBar Registration Page</h1>
        <td height="69" colspan="2">
    
    <form name="assign" method="post"  id="RegisterForm" action="RegServlet">
            
    <div id="half1">
    
    
    <h2>Username:</h2>
    <input id="username" type="text" name="username" value="Username" size="30"  onblur="OnBlurInput(this)" onclick="OnClickInput(this)"  class="required"  /> <p id= 'error'>   </p><br>

    <h2>Password:</h2>
    <input id="password" type="text" name="password" value="Password" size="30"  onblur="OnBlurInputPass(this)" onclick="OnClickInputPass(this)" class="required password"  /><p id= 'passerror'>  </p><br>

    <h2>Re-type Password:</h2>
    <input id="password2" type="text" name="password2" value="Password" size="30"  onblur="OnBlurInputPass(this)" onclick="OnClickInputPass(this)" class="required" equalTo="#password1"  /><p id= 'passerror'>  </p><br>

    <h2>Billing/Delivery Address:</h2>
    <input id="textbox" type="text" name="address"  value="Address" size="30"  onblur="OnBlurInputPass(this), repassword()" onclick="OnClickInputPass(this)"  class="required" /> <br>
    <p id= 'passerror'>  </p></br>

    <h2> City  /  Postal ID: </h2>
    <input id="city" type="text" name="city"  value="City" size="15"  onblur="OnBlurInputPass(this) " onclick="OnClickInputPass(this)"   class="required"/> <br><br>
   <input id="postal" type="text" name="postal"  value="Postal ID" size="15"  onblur="OnBlurInputPass(this) " onclick="OnClickInputPass(this)"   class="required zipcode"/><br>

   
   <a href="index.jsp"> <h2>Go Back</h2></a>    
    </div>
   <div id="half2">
   <h2>First Name:
   </h2><input id="firstname" type="text" name="firstname" value="Firstname" size="30" onblur="OnBlurInput(this)" onclick="OnClickInput(this)"   class="required"/><p id= 'nameerror'> </p><br>

   <h2>Middle Name:
   </h2><input id="middlename" type="text" name="middlename" value="Middlename" size="30"  onblur="OnBlurInput(this)" onclick="OnClickInput(this)"   class="required"> <p id= 'emailerror'>  </p><br>

   <h2>Last Name:
   </h2><input id="lastname" type="text" name="lastname" value="Lastname" size="30"  onblur="OnBlurInput(this)" onclick="OnClickInput(this)"  class="required"> <p id= 'emailerror'>  </p><br>

   <h2>E-Mail Address:
   </h2><input id="email" type="text" name="email"  value="Email" size="30" onblur="OnBlurInput(this),checker()"  onclick="OnClickInput(this)" class="required email"></br ><br>
    
    </div>
        
             
            <div id="half3">
             <h2> Credit Card Name: </h2> 
             <input type="text" name="ccname" id="ccname"/><br></br>
             
             <h2>Credit Card Number:</h2>
             <input type="text" name="creditcard1" id="creditcard1"/><br>
             
             <h2>Date:</h2> 
             <input type="text" name="expdate" id="expdate" /><br>
             
             <h2>Credit Card Type:</h2>         
            <select name ="credittype" id="type" class="creditCardType">
            <option value="">Choose Credit Card</option>
            <option value="Visa"> Visa </option>
            <option value="Mastercard"> Mastercard </option> 
                  
            </select></br></br></br>
   
        <!--   <img src="http://localhost:8080/SECPROGMP/CaptchaServlet"> </br>
      
         <input type="text" name="code"></input>
         </br></br></br>   -->
        <input type="submit" name="submit" value="Add Data"/>
        
        
        </div>
        
    </form>
     


    </body>
</html>
